import React from "react";

import {
  Switch,
  HashRouter,
  BrowserRouter,
  Route,
  Redirect,
} from "react-router-dom";

import Nofind from "./page/404";

import Context from "./context";

export default (): JSX.Element => {
  const routerList = [
    {
      path: "/threejs",
      component: React.lazy(() => import("./page/threejs")),
      children: [
        {
          path: "/threejs",
          exact: true,
          component: React.lazy(() => import("./page/threejs/one")),
        },
        {
          path: "/threejs/two",
          component: React.lazy(() => import("./page/threejs/two")),
        },
        {
          path: "/threejs/three",
          component: React.lazy(() => import("./page/threejs/three")),
        },
        {
          path: "/threejs/move",
          component: React.lazy(() => import("./page/threejs/move")),
        },
        {
          path: "/threejs/animate",
          component: React.lazy(() => import("./page/threejs/animate")),
        },
      ],
    },
    // { path: "/svg", component: React.lazy(() => import("./page/svg")) },
    // { path: "/mongo", component: React.lazy(() => import("./page/mongo")) },
    // { path: "/demo", component: React.lazy(() => import("./page/demo")) },
    // { path: "/animate", component: React.lazy(() => import("./page/animate")) },
    // { path: "/array", component: React.lazy(() => import("./page/array")) },
    // { path: "/string", component: React.lazy(() => import("./page/string")) },
    // { path: "/number", component: React.lazy(() => import("./page/number")) },
    // { path: "/webWorker", component: React.lazy(() => import("./page/webWorker")) },
    // { path: "/workTest", component: React.lazy(() => import("./page/workTest")) }, // 测试二维码解析和pdf与图片间的来回互转
    // { path: "/designMode", exact: true, component: React.lazy(() => import("./page/designMode")) },
    // { path: "/object", component: React.lazy(() => import("./page/object")) },
    // { path: "/computed", component: React.lazy(() => import("./page/computed")) },
    { path: "/2022css", component: React.lazy(() => import("./page/2022css")) },
    { path: "/cssPerformance", component: React.lazy(() => import("./page/cssPerformance")) },
    // { path: "/mymap", component: React.lazy(() => import("./page/Map")) },
    { path: "/nestjs", component: React.lazy(() => import("./page/nestjs")) },
    {
      path: "/reactTest",
      component: React.lazy(() => import("./page/reactTest")),
    },
    {
      path: "/draw",
      component: React.lazy(() => import("./page/draw")),
    },
    // {
    //   path: "/socketAndRequest",
    //   component: React.lazy(() => import("./page/socketAndRequest")),
    // },
    // {
    //   path: "/socketAndRequest",
    //   component: React.lazy(() => import("./page/socketAndRequest")),
    // },
    // {
    //   path: "/data",
    //   component: React.lazy(() => import("./page/data")),
    // },
    // {
    //   path: "/",
    //   exact: true,
    //   component: React.lazy(() => import("./page/routerTest")),
    // }
  ];
  const RenderRouter = ({ routerList }: { routerList: any[] }): JSX.Element => (
    <Switch>
      {routerList.map((item) => (
        <Route
          key={item.path}
          path={item.path}
          exact={item?.exact}
          render={() => {
            return (
              <item.component>
                {item.children ? (
                  // 嵌套路由“需要在组建中引入children”
                  <RenderRouter routerList={item.children} />
                ) : (
                  ""
                )}
              </item.component>
            );
          }}
        ></Route>
      ))}
      <Route path="/404" component={Nofind} />
      <Redirect from="*" to="/404" />
    </Switch>
  );
  return (
    <Context>
      <HashRouter>
        <RenderRouter routerList={routerList} />
      </HashRouter>
    </Context>
  );
};
